<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

    <meta charset="UTF-8">
    <title>shortvideos</title>
    <style>
        a{
            display: block;
            padding: 10px;
            text-decoration: none;
            color: #0033FF;
        }
        ol{
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        li{
            padding: 10px;
        }

        .list_right{
            position: absolute;
            right: 0px;
            height: 100%;
            overflow-y: scroll;
            top: 0px;
        }



        .pressed{
            color: green;
        }

        .active{
            color:#cc3322;
        }

        .icon_pressed{
            background-color: rgba(200, 200, 200, 0.3);
        }
    </style>

    <script src="js/request.js"></script>
</head>
<body>

    <video style="width: 100%" id="video" src="http://load_star.gitee.io/resources/video/nevergiveup.mov" autoplay="true" controls="controls" preload="preload"></video>

<ol id="title_parent" style="transition-duration: 300ms;">
</ol>

<div data-pressed="icon_pressed" style="transition-duration: 300ms;width: 30px;height: 60px;position: absolute;right: 100px;background-color: rgba(200, 200, 200, 0.5);border-top-left-radius: 10px;border-bottom-left-radius: 10px" id="channel_icon">
    <svg style="pointer-events:none;margin-top: 20px;margin-left: 7px;margin-right: 3px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2439">
        <path d="M401.07 708.27L206.93 512 403.2 315.73 341.33 256l-256 256 256 256 59.74-59.73z m221.86 0L819.2 512 622.93 315.73 682.67 256l256 256-256 256-59.74-59.73z"
              p-id="2440"></path>
    </svg>
</div>

<script type="text/javascript" src="./js/pressclick.js"></script>
<script>
    var video = document.getElementById("video");

    var currentPosition = 0;

    const listView = document.getElementById("title_parent");

    var channelIcon = document.getElementById("channel_icon");


    const data = [
        {"title": "nevergiveup", "url": "http://load_star.gitee.io/resources/video/nevergiveup.mov"},
        {"title": "风雨哈佛路片段", "url": "http://load_star.gitee.io/resources/video/风雨哈佛路片段.mov"},
        {"title": "给所有学生的短视频", "url": "http://load_star.gitee.io/resources/video/给所有学生的短视频.mov"},

        {"title": "盼归", "url": "http://load_star.gitee.io/resources/video/盼归.mov"},
        
        {"title": "你永远是我停泊的边岸，你永远是我避风的港湾", "url": "http://load_star.gitee.io/resources/video/你永远是我停泊的边岸，你永远是我避风的港湾.mov"}
    ];

    let innerString = "";
    for(let i =0; i<data.length; ++i){
        innerString+= "<li id=\"li"+i+ "\" data-position="+i+" data-pressed=\"pressed\">" + (i+1) + ". "+data[i].title+"</li>"
    }

    listView.innerHTML = innerString;



    var listener = function(e, id) {
        // switch(id) {
        //     case "test":
        //     console.log("test is clicked");
        //     break;
        //     case "test1":
        //     console.log("test1 is clicked");
        //     break;
        // }
        if (!isMobile && id === "channel_icon") {
            if (channelIcon.style.right === '0px') {
                channelIcon.style.right = listView.clientWidth + "px";
                listView.style.marginRight = "0px";
            } else {
                channelIcon.style.right = '0px'
                listView.style.marginRight = -listView.clientWidth + "px";

            }

            return
        }
        if (currentPosition === e.target.dataset.position) {
            return
        }
        titles[currentPosition].classList.remove("active");
        currentPosition = e.target.dataset.position 
        titles[currentPosition].classList.add("active");
        video.src = data[currentPosition].url


    }
    // addClickListener(document.getElementById("test"), listener)
    // addClickListener(document.getElementById("test1"), listener)

    var titles = document.getElementById("title_parent").getElementsByTagName("li")
    titles[currentPosition].classList.add("active")

    for(let i =0; i<titles.length; ++i){
        addClickListener(titles[i], listener)
    }
    


    if (!isMobile) {//是pc端则让list悬浮在右侧
        listView.classList.add("list_right")
        video.style.height = listView.clientHeight + "px";

        channelIcon.style.right = listView.clientWidth + "px";
        channelIcon.style.top = listView.clientHeight/2 - 30 + "px";


        addClickListener(channelIcon, listener)
        // channelIcon.onclick = function(){
        //     if (channelIcon.style.right === '0px') {
        //         channelIcon.style.right = listView.clientWidth + "px";
        //         listView.style.marginRight = "0px";
        //     } else {
        //         channelIcon.style.right = '0px'
        //         listView.style.marginRight = -listView.clientWidth + "px";

        //     }
        // }

        listView.style.backgroundColor = "rgba(200,200,200,0.5)"
    } else {
        channelIcon.style.display = "none"
    }

</script>
</body>
</html>
